<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template #filter-content>

        <dic-list-select v-model="listQuery.params.examType" dic-code="exam_type" title="选择考试类型" />
        <dic-list-select v-model="listQuery.params.openType" dic-code="open_type" title="开放类型"/>

        <el-date-picker
          v-model="listQuery.params.startTime"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="考试开始时间"
          size="small"
        />

        <el-date-picker
          v-model="listQuery.params.endTime"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="考试结束时间"
          size="small"
        />

        <el-input v-model="listQuery.params.title" placeholder="搜索考试名称" style="width: 200px;" size="small" class="filter-item" />

      </template>

      <template #data-columns>

        <el-table-column
          label="考试名称"
          prop="title"
          show-overflow-tooltip
        >

          <template v-slot="scope">
            <detail-link :id="scope.row.id" :title="scope.row.title" to="UpdateExam" permission="exam:update" />
          </template>

        </el-table-column>

        <el-table-column
          label="考试类型"
          align="center"
          width="120px"
          prop="examType_dictText"
        />

        <el-table-column
          label="开放权限"
          align="center"
          width="120px"
          prop="openType_dictText"
        />

        <el-table-column
          label="考试时间"
          align="center"
          width="180px"
          show-overflow-tooltip
        >

          <template v-slot="scope">
            {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
          </template>

        </el-table-column>

        <el-table-column
          label="考试总分"
          prop="totalScore"
          align="center"
          width="100px"
        />

        <el-table-column
          label="及格线"
          prop="qualifyScore"
          align="center"
          width="100px"
        />

        <el-table-column
          label="状态"
          align="center"
          width="120px"
        >

          <template v-slot="scope">
            {{ scope.row.state | stateFilter }}
          </template>

        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="280px"
        >
          <template v-slot="scope">
            <router-link :to="{ name: 'ExamStat', params: { examId: scope.row.id }}" style="margin-left: 10px">
              <el-link type="primary" icon="el-icon-pie-chart">统计</el-link>
            </router-link>

            <router-link :to="{ name: 'ExamWatch', params: { examId: scope.row.id }}" style="margin-left: 10px">
              <el-link type="primary" icon="el-icon-view">监考</el-link>
            </router-link>

            <el-link style="margin-left: 10px" type="primary" icon="el-icon-paperclip" @click="showShare(scope.row.id)">通知</el-link>

          </template>
        </el-table-column>

      </template>

    </data-table>

    <share-exam-dialog
      :dialog-show.sync="shareDialog"
      :exam-id="examId"/>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import DicListSelect from '@/components/DicListSelect'
import permission from '@/directive/permission/index.js'
import DetailLink from '@/components/DetailLink' // 权限判断指令
import ShareExamDialog from '@/views/admin/exam/exam/components/ShareExamDialog'
import { mapGetters } from 'vuex'

export default {
  name: 'ExamList',
  components: { ShareExamDialog, DetailLink, DicListSelect, DataTable },
  directives: { permission },
  data() {
    return {

      openTypes: [
        {
          value: 1,
          label: '完全开放'
        },
        {
          value: 2,
          label: '指定部门'
        },
        {
          value: 3,
          label: '指定人员'
        },
        {
          value: 9,
          label: '口令密码'
        }
      ],

      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },

      options: {
        add: {
          enable: true,
          permission: 'exam:add',
          router: { name: 'AddExam', params: { tmplId: '0' }}
        },
        edit: {
          enable: true,
          permission: 'exam:update',
          router: { name: 'UpdateExam', params: { id: '$id' }}
        },
        delete: {
          enable: true,
          permission: 'exam:delete',
          url: '/api/exam/exam/delete'
        },
        // 可批量操作
        multi: true,
        // 批量操作列表
        multiActions: [
          {
            value: 'enable',
            label: '启用',
            url: '/api/exam/exam/state'
          },
          {
            value: 'disable',
            label: '禁用',
            url: '/api/exam/exam/state'
          }
        ],
        // 列表请求URL
        listUrl: '/api/exam/exam/paging'
      },

      shareDialog: false,
      examId: ''
    }
  },

  computed: {
    ...mapGetters([
      'siteData'
    ])
  },
  methods: {

    showShare(id) {
      this.shareDialog = true
      this.examId = id
      console.log('考试ID', this.examId)
    }
  }
}
</script>
